<template>
    <div class="inquire-box">
      <div class="login">
        <div class="mylogin" align="center">
          <h2>查询结果</h2>
          <el-form
              :model="loginForm"
              :rules="loginRules"
              ref="loginForm"
          >
            <el-form-item label="" prop="passWord">
              <el-row>
                <el-col :span="2">
                  <span class="el-icon-user" style="color: black;"></span>
                </el-col>
                <el-col :span="22">
                  <el-input
                      class="inps"
                      placeholder="姓名"
                      v-model="loginForm.name"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="2">
                  <span class="el-icon-lock" style="color: black;"></span>
                </el-col>
                <el-col :span="22">
                  <el-input
                      class="inps"
                      placeholder="身份证"
                      v-model="loginForm.idNumber"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <div class="yzmBtn">
              <el-button type="primary"  @click="getCode"
              >人机验证
              </el-button>
              <div class="icon" v-show="yzm">
                <i class="el-icon-check"></i>
              </div>
            </div>
            <div>
              <!-- 登录时的滑动图片验证码,覆盖整个页面 -->
              <div class="mask" v-show="isShowSlide" @click.self="isShowSlide = false">
                <div class="slideContainer">
                  <SlideVerify ref="slideblock" :successFun="successVerify"></SlideVerify>
                </div>
              </div>
            </div>
            <el-form-item style="margin-top: 0.41rem">
              <el-button type="primary" round class="submitBtn" @click="submitForm"
              >查询
              </el-button>
            </el-form-item>

          </el-form>
        </div>

      </div>
      <van-dialog v-model="show"
                  width="85vw"
                  theme="round-button"
                  confirm-button-color="#4887f3"
                  :title="title" >
        <div class="dialog-box">
          <div style="padding: 0.256rem 0;color: red;display: flex;justify-content: center;align-items: center;flex-direction: column">
            <span style="font-weight: 900; font-size: 0.256rem">
           {{text}}
            </span>
            <span style="margin-top: 0.282rem;" v-if="title === '已通过'" @click="DownloadLQ">
            点击下载录取通知
          </span>
          </div>

          <div class="docWrap" v-if="title === '已通过'">
            <!-- 预览文件的地方（用于渲染） -->
            <div class="files-box" ref="files4"></div>
          </div>

        </div>
      </van-dialog>
    </div>
</template>

<script>
import SlideVerify from '@/components/slideverify'
import {UserMsgLogin} from "@/request/utils/user";
import {GetByIdFile, GetFile} from "@/request/utils/file";
import {renderAsync} from "docx-preview";
export default {
  name: "inquire",
  components:{
    SlideVerify
  },
  data() {
    return {
      isShowSlide: false,
      yzm: false,
      show: false,
      text: '',
      title: "",
      userinfo: {},
      loginForm: {
        name: "",
        idNumber: "",
      },
      loginRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        idNumber: [{ required: true, message: "请输入身份证", trigger: "blur" }],
      },
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goPreview() {
      GetByIdFile("2").then(res=>{
        renderAsync(res, this.$refs.files4); // 渲染到页面
      })
    },
    //验证码验证成功
    successVerify(){
      this.yzm = true;
      this.isShowSlide = false;

    },
    getCode(){
      this.isShowSlide = true;
      // 触发方法，每次打开遮罩层都刷新组件
      this.$bus.$emit('resetSlideVerify')
    },
    submitForm(){
      if (!this.yzm) {
        return this.$message({
          type: "error",
          message: "人机验证未通过！",
        });
      }
      if(this.loginForm.name === "admin"){
        return this.$message({
          type: "error",
          message: "查无此人",
        });
      }
      UserMsgLogin(this.loginForm).then(res=>{
        if(res.code === 0){
          this.userinfo = res;
          // this.text = res.auditComment;
          // this.stats = res.auditStatus;
          switch (res.data.auditStatus){
            case "未审核":
              this.text = "暂时未审核完毕请耐心等待稍后再来查询！";
              this.title = res.data.auditStatus;
              this.show = true
              break;
            case "未通过":
              this.text = res.data.auditComment;
              this.title = res.data.auditStatus;
              this.show = true
              break;
            case "已通过":
              this.text = res.data.auditComment;
              this.title = res.data.auditStatus;
              this.goPreview();
              this.show = true
              break;
          }
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    DownloadLQ(){
      GetByIdFile("2").then(res=>{
        var elink = document.createElement('a');
        elink.download = `录取通知.docx`;
        elink.style.display = 'none';
        var blob = new Blob([res], { type: 'application/docx' });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      })
    },
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.inquire-box{
  width: 100vw;
  height: 100vh;
  .login {
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 100vh;
    font-size: 0.41rem;
    background-position: left top;
    background-image: url("../assets/bg4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1000;

    color: #fff;
    font-family: "Source Sans Pro";
    position: relative;

  }

  .mylogin {
    width: 6rem;
    height: 7rem;
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 1.282rem;
    box-shadow: -0.385rem 0.385rem 0.385rem  rgba(6, 17, 47, 0.7);
    opacity: 1;

    h2{
      color: black;
      margin-bottom: 1.282rem;
    }

  }

  .inps input {
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 0.308rem;
  }

  .submitBtn {
    background-color: transparent;
    color: #39f;
    width: 5.128rem;
  }

  .dialogUser{
    .dialogBox{
      display: flex;
      flex-direction:column;
      justify-content:center;
      text-align: center;
      width: 100%;
      h2{
        margin-top: 1.282rem;
        color: red;
        font-size: 0.769rem;
      }
      span{
        margin: 1.282rem 0;
        font-size: 0.513rem;
        display: inline-block;
      }

    }
    button{
      margin-left: 1.282rem;
    }
  }

  .mask {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .mask .slideContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 9.744rem;
    height: 6.41rem;
    background-color: rgb(255, 255, 255);
  }

  .yzmBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    .icon{
      margin-left: 1.282rem;
      color: green;
      font-size: 0.769rem;
    }
  }
}


.docWrap{

  overflow-x: auto;
  .files-box{
    height: 65vh;
    position: relative;
  }
}
/deep/
.docx-wrapper{
  padding: 0 !important;
  background:white;
}
/deep/
.docx-wrapper>section.docx{
  width: 95% !important;
  padding: 0 !important;
  box-shadow:none;
  position: absolute;
  overflow-x: auto !important;
}
/deep/
.van-dialog__header{
  font-size: 0.569rem;
  font-weight: 900;
}


</style>